<template>
	<view class="page">
		<view class="section">
			<view class="tc flex">
				<uni-icons type="left" class="flex-1 tr padding-right-default" @click="toBack"></uni-icons>
				<picker mode="multiSelector" :value="outIndex" :range="checkoutList" @change="pickerChange"
					@columnchange="columnchange">
					<view>
						{{start}}--{{end}}
					</view>
				</picker>
				<uni-icons type="right" class="flex-1 tl padding-left-default" @click="toNext"></uni-icons>
			</view>
		</view>
		<view class="section">
			<u-search v-model="searchContent" @blur="toSearch" placeholder="搜索科目" :show-action="false" height="80"
				search-icon-size="46"></u-search>
		</view>

		<view class="section" v-for="(item,index) in balanceList">
			<view class="home-title" @click="openLike('/pages/balance-detail/balance-detail',item)">
				<text class="home-title-left cr-base">{{item.subjectCode}}&nbsp;{{item.subjectName}}</text>
				<uni-icons type="right" size="14"></uni-icons>
			</view>
			<view style="color: #cccccc;" class="text-size-xs">
				<view class="home-title padding-sm">
					<view>
						期初余额
						<!-- <span v-if="item.beginBalanceFor === 0"
							class="flat circle margin-left-xl padding-right-xs padding-left-xs">平</span>
						<span v-else-if="item.beginBalanceFor > 0"
							class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
						<span v-else-if="item.beginBalanceFor < 0"
							class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span> -->
					</view>
					<view>{{numFilter(item.beginBalance)}}</view>
				</view>
				<view class="home-title padding-sm">
					<view>
						本期借方发生额
					</view>
					<view>{{numFilter(item.debit)}}</view>
				</view>
				<view class="home-title padding-sm">
					<view>
						本期贷方发生额
					</view>
					<view>{{numFilter(item.credit)}}</view>
				</view>
				<view class="home-title padding-sm">
					<view>
						期末余额
						<!-- <span v-if="item.endBalanceFor === 0"
							class="flat circle margin-left-xl padding-right-xs padding-left-xs">平</span>
						<span v-else-if="item.endBalanceFor > 0"
							class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
						<span v-else-if="item.endBalanceFor < 0"
							class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span> -->
					</view>
					<view>{{numFilter(item.endBalance)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import accountBook from '../../js/api/accountBook'
	const app = getApp();
	export default {
		data() {
			return {
				dataList: [],
				balanceList: [],
				checkoutList: [],
				checkList: [],
				outIndex: [],
				start: '',
				end: '',
				searchContent: '',
			}
		},
		onLoad() {
			this.init()
		},
		watch: {
			outIndex() {
				this.loadData()
			}
		},
		methods: {
			toSearch(e) {
				if (e) {
					this.balanceList = this.dataList.filter(item => {
						return item.subjectName.toLowerCase().includes(this.searchContent) || item.subjectCode
							.toLowerCase().includes(this.searchContent);
					});
				} else {
					this.balanceList = this.dataList
				}
			},
			toNext() {
				if (this.outIndex[1] === 0) {
					app.globalData.showToast(this.checkList[0] + '是最新期数');
				} else {
					this.outIndex[1] -= 1
					this.end = this.checkList[this.outIndex[1]]
					this.loadData()
				}
			},
			toBack() {
				if (this.outIndex[0] + 1 === this.checkList.length) {
					app.globalData.showToast('没有数据了');
				} else {
					this.outIndex[0] += 1
					this.start = this.checkList[this.outIndex[0]]
					this.loadData()
				}
			},
			init() {
				this.checkList = uni.getStorageSync(app.globalData.data.cache_checkout_list)
				this.checkoutList.push(this.checkList)
				this.checkoutList.push(this.checkList)
				this.outIndex = [0, 0]
				this.start = this.end = this.checkList[0]
			},
			columnchange(e) {},
			pickerChange(e) {
				const values = e.detail.value
				if (values[0] < values[1]) {
					app.globalData.showToast('开始期间不能大于结束期间～');
					values[1] = values[0]
				}
				this.outIndex = values
				this.start = this.checkList[values[0]]
				this.end = this.checkList[values[1]]
			},
			openLike(url, item) {
				uni.navigateTo({
					url: url + "?subjectId=" + item.subjectId + "&subjectCode=" + item.subjectCode + "&sIndex=" +
						this.outIndex[0] + "&eIndex=" + this.outIndex[1]
				})
			},
			numFilter(value) {
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			loadData() {
				accountBook.subjectBalance({
					start: this.start,
					end: this.end,
					// currencyId:uni.getStorageSync(app.globalData.data.cache_currency_id),
					// auxiliary:false,
					// levelStart: 1,
					// levelEnd: 4,
				}).then((res) => {
					this.dataList = this.balanceList = res
				})
			}
		}
	}
</script>

<style>
	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		overflow: hidden;
	}

	.section {
		background-color: rgba(255, 255, 255, 1);
		padding: 10rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.home-title {
		display: flex;
		align-items: center;
		justify-content: space-between
	}
</style>